<template>
  <q-layout view="hHh LpR lFf" class="bg-gray-50 text-slate-700 dark:text-slate-500 dark:bg-slate-800">
    <q-header reveal elevated class="bg-gray-50 text-slate-700 dark:text-slate-500 dark:bg-slate-800">
      <gva-header />
    </q-header>

    <a侧栏 />

    <q-page-container id="页面容器" class="gva-body-h bg-gray-50 dark:bg-slate-800">
      <q-page-sticky expand position="top" class="justify-start z-20 bg-gray-50 dark:bg-slate-800 shadow-2">
        <gva-tabs v-if="config.showTabs" elevated />
      </q-page-sticky>

      <router-view v-if="reloadFlag" v-slot="{ Component, route }">
        <transition mode="out-in" name="el-fade-in-linear">
          <keep-alive :include="routerStore.相续路由组">
            <component :is="Component" :key="route.fullPath" />
          </keep-alive>
        </transition>
      </router-view>

      <q-page-sticky position="bottom-right" :offset="fabPos" class="z-10">
        <q-page-scroller :scroll-offset="150" :offset="[200, 10]">
          <q-btn dense glossy rounded icon="keyboard_arrow_up" v-touch-pan.prevent.mouse="moveFab" color="orange" />
        </q-page-scroller>
      </q-page-sticky>

    </q-page-container>
  </q-layout>
</template>

<script setup>
import a侧栏 from "@/layouts/aside/a侧栏.vue";
import GvaHeader from "@/layouts/header/index.vue";
import useResponsive from "@/hooks/responsive";
import GvaTabs from "./tabs/index.vue";
import BottomInfo from "@/components/bottomInfo/bottomInfo.vue";
import { emitter } from "@/utils/bus.js";
import { ref, onMounted, nextTick, reactive, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useRouterStore } from "@/stores/use_router_store";
import { useUserStore } from "@/stores/use_user_store";
import { useAppStore } from "@/stores";
import { storeToRefs } from "pinia";
const appStore = useAppStore();
const { config, theme, device } = storeToRefs(appStore);

const fabPos = ref([3, 80]);
const moveFab = (ev) => {
  fabPos.value = [fabPos.value[0] - ev.delta.x, fabPos.value[1] - ev.delta.y]
}

defineOptions({
  name: "GvaLayout",
});

useResponsive(true);
const font = reactive({
  color: "rgba(0, 0, 0, .15)",
});

watchEffect(() => {
  font.color =
    theme.value === "dark" ? "rgba(255,255,255, .15)" : "rgba(0, 0, 0, .15)";
});

const router = useRouter();
const route = useRoute();
const routerStore = useRouterStore();
onMounted(() => {
  // 挂载一些通用的事件
  emitter.on("reload", reload);
  if (userStore.loadingInstance) {
    userStore.loadingInstance.close();
  }
});

const userStore = useUserStore();

const reloadFlag = ref(true);
let reloadTimer = null;
const reload = async () => {
  if (reloadTimer) {
    window.clearTimeout(reloadTimer);
  }
  reloadTimer = window.setTimeout(async () => {
    if (route.meta.keepAlive) {
      reloadFlag.value = false;
      await nextTick();
      reloadFlag.value = true;
    } else {
      const title = route.meta.title;
      router.push({ name: "Reload", params: { title } });
    }
  }, 400);
};
</script>

<style lang="scss"></style>
